<template>
  <!-- 添加代办部分 -->
  <div class="input-add">
    <input
      type="text"
      name="todo"
      v-model="todoContent"
      @keyup.enter="emitAddTodo"
    />
    <button @click="emitAddTodo">
      <i class="plus"></i>
    </button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: "todo_add",
  props: ["todos"],
  setup(props, context) {
    // props 可以访问传递进来的属性
    // context 保存 vue 上下文里面有 emit 方法
    const todoContent = ref("");

    const emitAddTodo = () => {
      let len = props.todos.length;
      const todo = {
        id: len, // 此处由父亲传入 tid 说明：tid 是代办数组的长度
        content: todoContent.value,
        completed: false
      };
      context.emit("add-todo", todo); // 把事件提交给父亲处理
      todoContent.value = ""; // 添加代办事项后，内容清空
    }

    return {
      todoContent, // 变量：保存用户输入的代办内容 说明：双向数据绑定在 value 上
      emitAddTodo // 事件：添加新的代办 说明：用户敲 enter / 用户点击 button 会触发
    };
  },
}
</script>

<style scoped>
  /* 添加代办部分 */
  .input-add {
    position: relative;
    display: flex;
    align-items: center;
  }

  .input-add input {
    width: 100%;

    padding: 16px 52px 16px 18px;
    border: none;
    border-radius: 48px;
    outline: none;

    color: #626262;
    font-size: 16px;

    box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
    caret-color: #bbb;
  }

  .input-add button {
    width: 46px;
    height: 46px;

    border: none;
    border-radius: 50%;
    outline: none;

    position: absolute;
    right: 0;

    color: white;
    background: linear-gradient(#c0a5f3, #7f95f7);

    cursor: pointer;
  }

  .input-add .plus {
    width: 100%;
    height: 100%;

    display: block;

    /* + 符号用 css 样式生成 */
    background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
    background-size: 50% 2px, 2px 50%;
    background-position: center;
    background-repeat: no-repeat;
  }
</style>